<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>运维千里目</title>
    {% load static %}
    <link rel="stylesheet" href="http://43.137.4.113/public/bootstrap/css/bootstrap.min.css">
    <script src="http://43.137.4.113/public/bootstrap/js/jquery.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/jquery-ui.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/popper.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/jquery.validate.min.js"></script>
    <script src="http://43.137.4.113/public/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="http://43.137.v.113/public/all.min.css">
    <style>
        /* 自定义样式 */
        .navbar-custom {
            background-color: #B0C4DE;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 0.75rem 1.5rem;
        }

        .navbar-brand {
            color: #ffffff !important;
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover {
            transform: scale(1.05);
        }

        .navbar-nav .nav-item {
            margin: 0 8px;
        }

        .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            padding: 0.75rem 1rem;
            border-radius: 6px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffffff;
            transition: width 0.3s ease;
        }

        .navbar-nav .nav-link:hover::after {
            width: 100%;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.15);
        }

        .navbar-nav .nav-link i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        /* 移动端菜单样式 */
        @media (max-width: 991.98px) {
            .navbar-nav {
                padding-top: 1rem;
            }

            .navbar-nav .nav-item {
                margin: 4px 0;
            }

            .navbar-nav .nav-link {
                padding: 0.75rem 1.5rem;
            }
        }

        /* 滚动时导航栏变化 */
        .navbar-scrolled {
            background-color: #165DFF;
            padding: 0.5rem 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
    <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-custom">
        <div class="container-fluid">
            <!-- 品牌标识 -->
            <a class="navbar-brand" href="/station_battery_count_index">
                <i class="fas fa-robot"></i>
                <span>换电站备电数量排查</span>
            </a>

            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNav" aria-controls="navbarNav"
                    aria-expanded="false" aria-label="切换导航">
                <i class="fas fa-bars text-white"></i>
            </button>

            <!-- 菜单内容 -->
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业一部">
                            <i class="fas fa-clipboard-check"></i>事业一部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业二部">
                            <i class="fas fa-clipboard-check"></i>事业二部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业三部">
                            <i class="fas fa-clipboard-check"></i>事业三部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业四部">
                            <i class="fas fa-clipboard-check"></i>事业四部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业五部">
                            <i class="fas fa-clipboard-check"></i>事业五部
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/ai_inspect/station_battery_count_list/事业六部">
                            <i class="fas fa-clipboard-check"></i>事业六部
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<!-- 主要内容块：子模板的核心内容在这里 -->
    <div class="container">
        {% block content %}{% endblock %}
    </div>

    <!-- 公共页脚 -->
    <footer class="mt-5 py-3 bg-light text-center">
        <p>© 2025 运维千里目 上海启源芯动力智能巡检管理平台</p>
    </footer>
</body>
</html>